﻿<div class="table">
    <div class="">
        <div class="table-head" style="border-top: none; width: 165px;" ng-show="analystView.keyEsgIssueInfoDic.getValues().length > 0">Key ESG Issue</div>
        <div class="table-head" style="border-top: none; width: 240px;" ng-show="analystView.keyEsgIssueInfoDic.getValues().length > 0">Indicator Name</div>
        <div class="table-head" style="border-top: none; width: 155px; text-align:center;" ng-show="analystView.keyEsgIssueInfoDic.getValues().length > 0">Company Score<br/> (out of 100)</div>
        <div class="table-head" style="border-top: none; width: 155px; text-align:center;" ng-show="analystView.keyEsgIssueInfoDic.getValues().length > 0">Peer Group<br /> Average</div>
        <div class="table-head" style="border-top: none; width: 155px; text-align:center;" ng-show="analystView.keyEsgIssueInfoDic.getValues().length > 0">Leading<br />Practice Average</div>
        <div class="table-head" style="border-top: none; border-right: none; width: 155px; text-align:center;" ng-show="analystView.keyEsgIssueInfoDic.getValues().length > 0">Leading<br />Practice Gap</div>
    </div>
    <div ng-repeat="keyEsgIssueInfo in analystView.keyEsgIssueInfoDic.getValues()" style="border-top: 1px solid #cccccc;">
        <div class="{{$index % 2==1 ? 'table-row odd': 'table-row'}}" ng-repeat="indicator in keyEsgIssueInfo.getIndicators()">
            <div class="table-cell table-cell-block" style="width: 165px;" ng-if="$index == 0"><b ng-bind="indicator.keyEsgIssue.name"></b></div>
            <div class="table-cell table-cell-block" style="border-top: none; width: 165px; background-color: transparent;" ng-if="$index > 0">&nbsp;</div>
            <div class="table-cell table-cell-block" style="width: 240px;"><span style="font-weight: bold;" href="">{{ indicator.name }}</span></div>
            <div class="table-cell table-cell-block" style="width: 155px; text-align: center;">{{ indicator.companyScoreName }}&nbsp;</div>
            <div class="table-cell table-cell-block" style="width: 155px; text-align:center;">{{ indicator.peerGroupAvgName }}&nbsp;</div>
            <div class="table-cell table-cell-block" style="width: 155px; text-align:center;">{{ indicator.bestPracticeName }}&nbsp;</div>
            <div class="table-cell table-cell-block" style="width: 155px; text-align:center; border-right: none;">
                <div ng-style="{ 'background-color': indicator.materialBestPracticeGapColor }" ng-show="indicator.materialBestPracticeGap != -1" style="width:13px; height: 13px; border-radius: 10px; display: inline-block;"></div>
                <div style="width:13px; height: 13px; border-radius: 10px; display: inline-block; background-color: #acb0b2;" ng-show="indicator.materialBestPracticeGap == -1"></div>
                &nbsp;
            </div>
            <div class="clearfix"></div>
        </div>        
    </div>
</div>